
import React, { Component, createRef } from "react";
import type { ReactNode } from 'react'


interface iState {
}
interface iProps {
    title: string
}

// 逐层传递，顶级组件一层一层的将数据传递到后代组件中使用，不能出现断层

class First extends Component {

    props = {
        title: ''
    }

    constructor(props: iProps) {
        super(props)
        this.props = props
    }

    render(): ReactNode {
        return <>
            <div>
                <h2> First 子组件 - {this.props.title} </h2>

                <hr />

                <Son title={this.props.title}></Son>
            </div>
        </>
    }
}
function Son(props: iProps) {
    return <>
        <h6>Son 孙子组件 - {props.title}</h6>
    </>
}

export default class App extends Component {

    state = {
        title: '辣条'
    }

    render() {
        return <>
            <div>
                <h1>祖先组件 - {this.state.title}</h1>
                <hr />
                <First title={this.state.title}></First>
            </div>
        </>
    }

}